<template>
	<view>
		<swiper class="banner-box" :style="'height:'+windowHeight+'px'" :autoplay="true"  :interval="3000" :duration="1000" @change='swiperChange'>
			<swiper-item class="banner-item" v-for="(item, index) in bannerList" :key="index">
				<view class="shop-img">
					<image :src="item" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots-box flexWrap">
			<view class="store-info">
				<view class="room-name">卡二筒包房</view>
				<view>小爱台球-理想中心店</view>
			</view>
			<view class="speed">{{Number(currmentDotIndex+1)}}/{{bannerList.length}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currmentDotIndex:0,
				bannerList:['https://static.mo-yu.vip/uploads/20230402/fdb5b0c7a4899f673db452070987546c.jpeg','https://static.mo-yu.vip/uploads/20230402/b6064461fc1e7913f0fbc038d387dd2a.jpeg'],
				windowHeight: '',
			};
		},
		created() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
		
			this.windowHeight = windowHeight;
		},
		methods:{
			swiperChange(e) {
				this.currmentDotIndex = e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.banner-box{
		.banner-item{
			.shop-img{
				height: 100%;
			}
		}
	}
	.dots-box{
		position: fixed;
		left: 36upx;
		right: 36upx;
		bottom: 80upx;
		margin: auto;
		.store-info{
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			.room-name{
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				margin-bottom: 10upx;
			}
		}
		.speed{
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
